<template>
<!-- 发布简讯 -->
  <div class="home">
    <menuBar></menuBar>
    <div class="content">
        <headPortrait class="headPortrait"></headPortrait>

        <div class="page">
          <img class="icon" src="@/assets/img/writer/item8.png" alt="">

          <div class="form">

              <div class="formItem">
                    <el-select style="width: 100%;" v-model="state.formObj.classfly_id" placeholder="请选择分类">
                        <el-option v-for="(item,index) in store.state.writer.typeArr" :key="index" :label="item.title" :value="item.id">
                        </el-option>
                    </el-select>
              </div>

              <div class="formItem">
                  <el-input v-model="state.formObj.keyword" placeholder="请输入关键字"></el-input>
              </div>

              <div class="formItem">
                  <el-input v-model="state.formObj.title" placeholder="请输入标题(最多30字)"></el-input>
              </div>

              <!-- <div class="formItem">
                  <div>
                     <upload-file class="uploadFile" ref="uploadFile"></upload-file>
                      <el-dialog v-model="state.dialogVisible">
                          <img width="100%" :src="state.dialogImageUrl" alt="">
                      </el-dialog>
                  </div>
                  <div class="textarea">
                        <div class="text">
                          {{state.formObj.desc.length}}/40
                        </div>
                        <el-input type="textarea" style="width: 348px;height: 122px;" :rows="6" maxlength="40" placeholder="选填   / 简介会在显示在文章列表" v-model="state.formObj.desc">
                        </el-input>
                  </div>

              </div> -->

              <div class="formItem" style="margin-left:20px;">
                  <div class="tips">
                    请输入正文
                  </div>
                  <div class="ueditor"  style="width: 700px;">
                      <vue-ueditor-wrap v-model="state.formObj.details" :config="editorConfig" style="height:220px;" @ready="ready" editor-id="editor-demo-02"></vue-ueditor-wrap>
                  </div>
              </div>

          </div>

          <div class="bottomBtn">
                <div class="btn" @click="router.go(-1)">返回</div>
                <div class="btn" @click="submit">发布</div>
          </div>

        </div>
    </div>
  </div>
</template>
<script>
import { getCurrentInstance, onMounted, reactive, } from 'vue'
import { useRouter } from 'vue-router'
import { useStore } from 'vuex'
import menuBar from './component/menuBar'
import headPortrait from './component/headPortrait'
import uploadFile from '@/components/uploadFile/uploadFile'

const state = reactive({
      formObj:{
          classfly_id:'',//分类
          keyword:'',
          title:'',
          synopsis:'111',//简介
          details:'',//详情
          // imgs:'',//封面
          type: '3',
          // video_url:'',
      },
      disabled: false,
      dialogVisible: false,
  });
export default {
  name: 'releaseNewsletter',
  components: {
    menuBar,
    headPortrait,
    // uploadFile
  },
  setup(props,{emit}) {
      const ctx = getCurrentInstance();
      const _this = ctx.appContext.config.globalProperties
      const router = useRouter();
      const store = useStore();
      function submit(){

        _this.$request({
          url:'/api/pcWriter/add_information',
          data:state.formObj
        }).then(res=>{
          console.log(res);
          if(res.code==1){
            _this.$message.success('发布成功')
            setTimeout(()=>{
              router.push({name:'waitForReview'})
            },1000)
          }else{
            _this.$message.error('发布失败，请检查信息是否输入完整')
          }
        })
      }
      function ready(_item){
        _item.options.initialFrameHeight=227
        console.dir(_item.options.initialFrameHeight);
      }
      onMounted(()=>{
        // console.log(222);
      });
      return{
        state,store,submit,router,ready
      }
  },
  props: {},
  watch: {},
  methods: {},
  computed: {},
  mounted () {
  },
  created () {
    this.editorConfig = {
      // 更多 UEditor 配置，参考 http://fex.baidu.com/ueditor/#start-config
      // 访问 UEditor 静态资源的根路径，可参考 https://hc199421.gitee.io/vue-ueditor-wrap/#/faq
      UEDITOR_HOME_URL: '/UEditor/',
        // 服务端接口（这个地址是我为了方便各位体验文件上传功能搭建的临时接口，请勿在生产环境使用！！！）
        // serverUrl: 'http://inter.huanxingbi.cn/ueditor/php/controller.php',
        serverUrl: `http://caijin.huanxingbi.cn/ueditor/php/controller.php`,
        // serverUrl: `http://caijin.huanxingbi.cn/api/common/pc_upload`,
        toolbars: [[
        'justifyjustify', 'undo', 'bold', '|', 'simpleupload', 'forecolor', 'justifycenter',
        'justifyleft', 'horizontal', 'indent', 'fontsize', 'fontfamily'
      ]]
    }
  },
}
</script>
<style lang="scss" scoped>
  /deep/  .el-input__inner,.el-select:hover,.el-input__inner:hover{
    border: 0;
    background: transparent;
  }
  // /deep/ #edui1_iframeholder{
  //   height: 200px !important;
  // }

  // /deep/ .edui-editor-iframeholder .edui-default{
  //   height: 200px !important;
  // }
  @media screen and (max-width: 1000px) {
       .home{
           .content{
             width: 100vw !important;
           }
       }

  }


    .home{
      display: flex;
      height: 100vh;
      width: 100vw;
      .content{
        width: 90%;
        position: relative;
        // background-color: pink;
        .inform{
          position: absolute;
          top: 11%;
          left: 2.5%;
          background-color: #fff;
          height: 56px;
          width: 95%;
          border-radius: 10px;
          display: flex;
          align-items: center;
          box-sizing: border-box;
          padding: 0 10% 0 2%;
          .text{
            flex: 1;
            padding-left: 30px;
            border-left: 2px solid #E0E0E0;
          }
          span{
            color: #2E3C6D;
          }
          .title{
            margin: 0 15px;
          }
          .more{
            margin-left: 10px;
          }
         img{
           width: 20px;
           height: 21px;
         }
          // box-shadow: 1px 1px 3px rgba(0,0,0,.1),0px 1px 3px rgba(0,0,0,.1) inset;
        }
        .page{
          position: absolute;
          top: 12%;
          left: 2.5%;
          background-color: #fff;
          height: 80%;
          width: 95%;
          border-radius: 10px;
          overflow-y: auto;
          .icon{
            position:absolute;
            top: 2%;
            right: 4%;
            width: 131px;
            height: 116px;
          }

           .ueditor{
                  overflow-y: auto;
                  overflow-x: hidden;
                  height: 260px;
                  background: pink;
                  box-shadow: 1px 1px 3px rgba(0,0,0,.1),0px 1px 3px rgba(0,0,0,.1) inset;

              }

          .form{
            .formItem{
              width: 41%;
              margin: 15px 0;
             
              &:nth-child(5){
                margin-left: 20px;
              }

              &:nth-child(1), &:nth-child(2){
                background: #F6F8FF;
                position: relative;
                &:before{
                  content: '';
                  position: absolute;
                  top: 0;
                  right: -4%;
                  width: 40px;
                  height: 40px;
                  border-radius: 50%;
                  background: #F6F8FF;
                }
              }

              .textarea{
                position: relative;
                .text{
                  position: absolute;
                  bottom: 3%;
                  right: 5%;
                  z-index: 10;
                  color: #999999;
                }
              }
              .tips{
                color: #8A9099;
                margin-bottom: 10px;
              }
            }
          }


          .bottomBtn{
            margin: 50px 0;
            display: flex;
            justify-content: flex-end;
            width: 50%;
            .btn{
              width: 78px;
              height: 28px;
              border: 1px solid #DCDFE0;
              border-radius: 2px;
              color: #909399;
              margin-right: 10px;
              display: grid;
              place-items: center;
              cursor: pointer;
              &:nth-child(2){
                width: 78px;
                height: 28px;
                background: #2B71FF;
                border-radius: 2px;
                color: #fff;
              }
            }
          }

        }
      }
    }
</style>
